<template>
  <div>
    <div class="left3">
      <div class="top">
        <div class="logo">
          <img src="@/assets/yxtx/category_icon.png" alt="" />
        </div>

        <h3>栏目导航</h3>
      </div>
      <div class="bottom">
        <ul>
          <li
            @click="toCategory(item.category)"
            v-for="(item, index) in categories"
            :key="index"
            v-show="index != 0"
          >
            <img src="@/assets/yxtx/category_little.png" alt="" />
            {{ item.category.name }}
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import { get, post } from "@/utils/request";
export default {
  data() {
    return {
      categories: [],
    };
  },
  methods: {
    // 获取所有新闻分类
    async getCategories() {
      let res = await get("/index/article/findCategoryArticles");
      this.categories = res.data;
      // console.log(this.categories);
    },
    // 点击左侧导览更新右侧新闻
    toCategory(category) {
      this.$router.push({
        path: "/category",
        query: category,
      });
    },
  },

  created() {
    this.getCategories();
  },
};
</script>

<style lang="scss" scoped>
.left3 {
  width: 100%;
  height: 100%;
  .top {
    width: 100%;
    height: 55px;
    background-color: #be5b24;
    .logo {
      overflow: hidden;
      display: inline-block;
      width: 40px;
      img {
        float: right;
        margin-right: 8px;
      }
    }
    h3 {
      display: inline-block;
      color: #fff;
      width: 220px;
      height: 55px;
    }
  }
  .bottom {
    box-sizing: border-box;
    padding: 20px;
    ul {
      li {
        font-size: 16px;
        color: #333;
        font-family: "微软雅黑";
        line-height: 35px;
        border-bottom: 1px solid #e5e5e5;
        img {
          width: 16px;
          height: 16px;
          vertical-align: middle;
        }
      }
      li:hover {
        text-decoration: underline 1.5px solid #990000;
        color: #990000;
        cursor: pointer;
      }
    }
  }
}
</style>